.head{
	height: 20em;
	position: relative;
	.left{
		position: absolute;
		width: 50%;
		
		img{
			cursor: pointer;
			width: 30%;
			&:nth-child(2){
				width: 25%;
				
			}
		}
	}
	.right{
		position: absolute;
		right: 0;
		width: 60%;
		h1{
			margin-top: 3em;
			font-size: 2em;
			color: white;
		}
		p{
			margin-left: 1em;
			font-size: 1.1em;
			color:#72625e;
		}
	}
}
@media screen and (max-width:992px){
	.head{
		height: 16em;
		.left{
			img{
				width:35%;
			}
		}
		.right{
			width:65%;
			h1{
				margin-top: 4rem;
				font-size: 1.4em;
			}
			p{
				font-size: .7em;
			}
		}
	}
}
@media screen and (max-width:670px){
	.head{
		height: 13em;
	}
}
@media screen and (max-width:564px){
	.head{
		height: 10em;
		.left{
			width: 40%;
		}
		.right{
			width:70%;
			h1{
				margin-top: 2rem;
				font-size: 1.1em;
			}
			p{
				font-size: .4em;
			}
		}
	}
}
@media screen and (max-width:495px){
	.head{
		height: 26em;
		.left{
			width: 90%;
			left: 1em;
			top: 0em;
			text-align: center;
			img{
				width: 40%;
				&:nth-child(2){
					width: 30%;
				}
			}
		}
		.right{
			width: 75%;
			left: 15%;
			top: 60%;
		}
	}
}
@media screen and (max-width:425px){
	.head{
		height: 23em;
		.left{
			width: 90%;
			left: 1em;
			top: 0em;
			text-align: center;
			img{
				width: 40%;
				&:nth-child(2){
					width: 30%;
				}
			}
		}
		.right{
			width: 90%;
			left: 10%;
			top: 58%;
		}
	}
}
@media screen and (max-width:375px){
	.head{
		height: 22em;
		.left{
			width: 90%;
			left: 1em;
			top: 0em;
			text-align: center;
			img{
				width: 40%;
				&:nth-child(2){
					width: 30%;
				}
			}
		}
		.right{
			width: 95%;
			left: 3%;
			top: 46%;
			p{
				
			}
		}
	}
}
@media screen and (max-width:340px){
	.head{
		height: 21em;
		.left{
			width: 90%;
			left: 1em;
			top: 0em;
			text-align: center;
			img{
				width: 40%;
				&:nth-child(2){
					width: 30%;
				}
			}
		}
		.right{
			width: 95%;
			left: 3%;
			top: 44%;
			h1{
				font-size: 1.2em!important;
			}
			p{
				font-size: 0.5em!important;
			}
		}
	}
}

.cj{
	margin-bottom: .5em;
	h1{
		font-size: 2em;
		font-weight: bold;
		color: white;
		span{
			font-size: .6em;
			color: black;
			font-weight: normal;
			margin-left: .5em;
		}
	}
	
}
@media screen and (max-width:386px){
	.cj{
		h1{
			font-size: 1.7em;
			span{
				font-size: .4em;
			}
		}
	}
}

.list{
	height: 33em;
	overflow: hidden;
	margin-bottom: 5em;
	.listl{
		float: left;
		background-image: url(../img/libc.png);
		background-repeat:no-repeat;
		background-repeat: repeat-y;
		background-size: 100%;
		width: 55%;
		ol{
			padding: 1em 1em;
			li{
				margin-left: 2.7em;
				list-style-type: decimal;
				color: #F5F5F5;
				padding: .5em 0;
				font-size: 1.2em;
				letter-spacing: .2em;
				cursor: pointer;
			}
			li:hover{
				color:red;
			}
			hr{
				margin: 0;
			}
		}
	}
	.listrt{
		float: right;
		width: 43%;
		background-color: #8d7d76;
		margin-bottom: 1em;
		ul{
			float: left;
			width: 100%;
			li{
				margin-top: 1em;
				margin-bottom: 1em;
				float: left;
				width: 25%;
				text-align: center;
				color: white;
				cursor: pointer;
				
			}
			li:hover{
				color:red;
			}
		}
			
	}
	.listrb{
		float: right;
		width:43%;
		background-color: #8d7d76;
		ul{
			margin-top: -4px;
			float: left;
			width: 100%;
			li{
				list-style-type: disc;
				margin: .4em 2em;
				
				color: white;
				cursor: pointer;
				font-size: 1.2em;
				span{
					float: right;
				}
			}
			li:hover{
				color:red;
			}
		}
	}
}
@media screen and (max-width:992px){
	.list{
		.listl{
			ol{
				li{
					padding: .5em 0;
					letter-spacing: 0;
				}
			}
		}
		.listrb{
			ul{
				li{
					margin: .4em 2em;
				}
			}
		}
	}
}
@media screen and (max-width:682px){
	.list{
		height: 65em;
		.listl{
			width: 100%;
			margin-bottom: 1em;
			ol{
				li{
					padding: .4em 0;
					letter-spacing: 0;
				}
			}
		}
		.listrt{
			width:100%;
			
		}
		.listrb{
			width: 100%;
			ul{
				li{
					margin: .4em 2em;
				}
			}
		}
	}
}
.center{
	margin-bottom: 8em;
}
